<template>
  <div id="mindMapContainer"></div>
</template>
<script setup>
import { ref, onMounted, shallowRef, createApp } from "vue";
import MindMap from "simple-mind-map";
import project from "./components/project.vue";
import demand from "./components/demand.vue";
import task from "./components/task.vue";
import Drag from "simple-mind-map/src/plugins/Drag.js";
let mindMap = null;
//提供节点拖拽功能
// MindMap.usePlugin(Drag);
// 当前激活的节点列表
// const activeNodes = shallowRef([]);
let data = [
  {
    projectNo: "ZXXM2024-0001",
    projectName: "xjw-20240416-新建项目-变更",
    projectDevRiskCount: 0,
    projectRiskCount: 1,
    projectProgressState: 1,
    projectQualityState: 3,
    projectTeamCount: 3,
    projectTeamNames: "研发一体化开发团队,研发一体化测试团队,研发一体化二部开发团队",
    projectLeaderCount: 1,
    projectLeaderNames: "测试技术经理",
    projectStageName: "三级评审",
    demandRelevancyChartList: [
      {
        demandNo: "xq202404170001",
        demandName: "测试需求",
        demandDevRiskCount: 0,
        demandRiskCount: 0,
        demandProgressState: 3,
        demandQualityState: 3,
        demandHostAppName: "测试001应用",
        demandProductManagerCount: 1,
        demandProductManagerNames: "管理员",
        demandAnalystsCount: 1,
        demandAnalystsNames: "需求分析师",
        demandStageName: "需求任务实施",
        demandPresenterCount: 1,
        demandPresenterNames: "管理员",
        taskRelevancyChartList: [
          {
            taskNo: "xq2024041700010010001",
            taskName: "测试任务1514",
            taskIsHostName: "主办",
            taskDevRiskCount: 0,
            taskRiskCount: 0,
            taskProgressState: 3,
            taskQualityState: 3,
            taskApplyName: "测试001应用",
            taskTeamName: "研发一体化开发团队",
            taskProductManagerCount: 1,
            taskProductManagerNames: "管理员",
            taskProjectManagerCount: 1,
            taskProjectManagerNames: "管理员",
            taskAnalystsCount: 1,
            taskAnalystsCountNames: "管理员",
            taskDeveloperCount: 0,
            taskDeveloperNames: "",
            taskTestManagerCount: 0,
            taskTestManagerNames: null,
            taskTesterCount: 0,
            taskTesterNames: null,
            versionStateName: "未纳版",
            taskSplitterCount: 1,
            taskSplitterNames: "管理员",
            taskSplitDate: "2024-04-24 16:43:26",
            taskRelevancyChartList: null
          },
          {
            taskNo: "xq2024041700010010001",
            taskName: "测试任务1514",
            taskIsHostName: "主办",
            taskDevRiskCount: 0,
            taskRiskCount: 0,
            taskProgressState: 3,
            taskQualityState: 3,
            taskApplyName: "测试001应用",
            taskTeamName: "研发一体化开发团队",
            taskProductManagerCount: 1,
            taskProductManagerNames: "管理员",
            taskProjectManagerCount: 1,
            taskProjectManagerNames: "管理员",
            taskAnalystsCount: 1,
            taskAnalystsCountNames: "管理员",
            taskDeveloperCount: 0,
            taskDeveloperNames: "",
            taskTestManagerCount: 0,
            taskTestManagerNames: null,
            taskTesterCount: 0,
            taskTesterNames: null,
            versionStateName: "未纳版",
            taskSplitterCount: 1,
            taskSplitterNames: "管理员",
            taskSplitDate: "2024-04-24 16:43:26",
            taskRelevancyChartList: null
          }
        ]
      },
      {
        demandNo: "xq202404190007",
        demandName: "rfh_测试任务",
        demandDevRiskCount: 0,
        demandRiskCount: 0,
        demandProgressState: 3,
        demandQualityState: 3,
        demandHostAppName: "测试001应用",
        demandProductManagerCount: 1,
        demandProductManagerNames: "产品经理",
        demandAnalystsCount: 1,
        demandAnalystsNames: "需求分析师",
        demandStageName: "需求任务实施",
        demandPresenterCount: 1,
        demandPresenterNames: "管理员",
        taskRelevancyChartList: [
          {
            taskNo: "xq2024041900070010001",
            taskName: "卖屁股的小子",
            taskIsHostName: "主办",
            taskDevRiskCount: 0,
            taskRiskCount: 0,
            taskProgressState: 3,
            taskQualityState: 3,
            taskApplyName: "测试001应用",
            taskTeamName: "研发一体化测试团队",
            taskProductManagerCount: 1,
            taskProductManagerNames: "产品经理",
            taskProjectManagerCount: 1,
            taskProjectManagerNames: "项目经理",
            taskAnalystsCount: 1,
            taskAnalystsCountNames: "需求分析师",
            taskDeveloperCount: 0,
            taskDeveloperNames: "",
            taskTestManagerCount: 0,
            taskTestManagerNames: null,
            taskTesterCount: 0,
            taskTesterNames: null,
            versionStateName: "未纳版",
            taskSplitterCount: 1,
            taskSplitterNames: "管理员",
            taskSplitDate: "2024-04-25 15:52:50",
            taskRelevancyChartList: [
              {
                taskNo: "xq2024041900070010002",
                taskName: "立牌坊",
                taskIsHostName: "协办",
                taskDevRiskCount: 0,
                taskRiskCount: 0,
                taskProgressState: 3,
                taskQualityState: 3,
                taskApplyName: "测试001应用",
                taskTeamName: "研发一体化开发团队",
                taskProductManagerCount: 1,
                taskProductManagerNames: "产品经理",
                taskProjectManagerCount: 1,
                taskProjectManagerNames: "项目经理",
                taskAnalystsCount: 1,
                taskAnalystsCountNames: "需求分析师",
                taskDeveloperCount: 0,
                taskDeveloperNames: "",
                taskTestManagerCount: 0,
                taskTestManagerNames: null,
                taskTesterCount: 0,
                taskTesterNames: null,
                versionStateName: "未纳版",
                taskSplitterCount: 1,
                taskSplitterNames: "管理员",
                taskSplitDate: "2024-04-25 15:52:50",
                taskRelevancyChartList: null
              },
              {
                taskNo: "xq2024041600010010001",
                taskName: "测试任务",
                taskIsHostName: "协办",
                taskDevRiskCount: 0,
                taskRiskCount: 0,
                taskProgressState: 3,
                taskQualityState: 3,
                taskApplyName: "测试001应用",
                taskTeamName: "研发一体化测试团队",
                taskProductManagerCount: 1,
                taskProductManagerNames: "产品经理",
                taskProjectManagerCount: 1,
                taskProjectManagerNames: "项目经理",
                taskAnalystsCount: 1,
                taskAnalystsCountNames: "需求分析师",
                taskDeveloperCount: 2,
                taskDeveloperNames: "开发人员,产品经理",
                taskTestManagerCount: 0,
                taskTestManagerNames: null,
                taskTesterCount: 0,
                taskTesterNames: null,
                versionStateName: "未纳版",
                taskSplitterCount: 1,
                taskSplitterNames: "管理员",
                taskSplitDate: "2024-04-25 16:38:21",
                taskRelevancyChartList: null
              }
            ]
          }
        ]
      },
      {
        demandNo: "xq202404230001",
        demandName: "xhy测试",
        demandDevRiskCount: 0,
        demandRiskCount: 0,
        demandProgressState: 3,
        demandQualityState: 3,
        demandHostAppName: "测试001应用",
        demandProductManagerCount: 1,
        demandProductManagerNames: "产品经理",
        demandAnalystsCount: 1,
        demandAnalystsNames: "需求分析师",
        demandStageName: "需求任务实施",
        demandPresenterCount: 1,
        demandPresenterNames: "管理员",
        taskRelevancyChartList: [
          {
            taskNo: "xq2024041600010010006",
            taskName: "xhy测试任务",
            taskIsHostName: "主办",
            taskDevRiskCount: 0,
            taskRiskCount: 0,
            taskProgressState: 3,
            taskQualityState: 3,
            taskApplyName: "测试001应用",
            taskTeamName: "研发一体化开发团队",
            taskProductManagerCount: 1,
            taskProductManagerNames: "产品经理",
            taskProjectManagerCount: 1,
            taskProjectManagerNames: "项目经理",
            taskAnalystsCount: 1,
            taskAnalystsCountNames: "需求分析师",
            taskDeveloperCount: 0,
            taskDeveloperNames: "",
            taskTestManagerCount: 0,
            taskTestManagerNames: null,
            taskTesterCount: 0,
            taskTesterNames: null,
            versionStateName: "未纳版",
            taskSplitterCount: 1,
            taskSplitterNames: "管理员",
            taskSplitDate: "2024-04-28 16:14:03",
            taskRelevancyChartList: null
          }
        ]
      },

      {
        demandNo: "xq202404290001",
        demandName: "xjw-设计评审需求(误删)",
        demandDevRiskCount: 0,
        demandRiskCount: 0,
        demandProgressState: 3,
        demandQualityState: 3,
        demandHostAppName: "测试001应用",
        demandProductManagerCount: 1,
        demandProductManagerNames: "产品经理",
        demandAnalystsCount: 1,
        demandAnalystsNames: "需求分析师",
        demandStageName: "需求任务实施",
        demandPresenterCount: 1,
        demandPresenterNames: "管理员",
        taskRelevancyChartList: [
          {
            taskNo: "xq2024042900010010001",
            taskName: "xjw-设计评审主办任务",
            taskIsHostName: "主办",
            taskDevRiskCount: 0,
            taskRiskCount: 0,
            taskProgressState: 3,
            taskQualityState: 3,
            taskApplyName: "测试001应用",
            taskTeamName: "研发一体化开发团队",
            taskProductManagerCount: 1,
            taskProductManagerNames: "产品经理",
            taskProjectManagerCount: 1,
            taskProjectManagerNames: "项目经理",
            taskAnalystsCount: 1,
            taskAnalystsCountNames: "需求分析师",
            taskDeveloperCount: 0,
            taskDeveloperNames: "",
            taskTestManagerCount: 0,
            taskTestManagerNames: null,
            taskTesterCount: 0,
            taskTesterNames: null,
            versionStateName: "未纳版",
            taskSplitterCount: 1,
            taskSplitterNames: "管理员",
            taskSplitDate: "2024-04-29 09:17:51",
            taskRelevancyChartList: [
              {
                taskNo: "xq2024042900010010002",
                taskName: "xjw-设计评审协办任务",
                taskIsHostName: "协办",
                taskDevRiskCount: 0,
                taskRiskCount: 0,
                taskProgressState: 3,
                taskQualityState: 3,
                taskApplyName: "测试001应用",
                taskTeamName: "研发一体化开发团队",
                taskProductManagerCount: 1,
                taskProductManagerNames: "产品经理",
                taskProjectManagerCount: 1,
                taskProjectManagerNames: "项目经理",
                taskAnalystsCount: 1,
                taskAnalystsCountNames: "需求分析师",
                taskDeveloperCount: 0,
                taskDeveloperNames: "",
                taskTestManagerCount: 0,
                taskTestManagerNames: null,
                taskTesterCount: 0,
                taskTesterNames: null,
                versionStateName: "未纳版",
                taskSplitterCount: 1,
                taskSplitterNames: "管理员",
                taskSplitDate: "2024-04-29 09:17:51",
                taskRelevancyChartList: null
              }
            ]
          }
        ]
      },
      {
        demandNo: "xq202404290005",
        demandName: "weiyf0429测试需求",
        demandDevRiskCount: 0,
        demandRiskCount: 0,
        demandProgressState: 3,
        demandQualityState: 3,
        demandHostAppName: "测试001应用",
        demandProductManagerCount: 1,
        demandProductManagerNames: "产品经理",
        demandAnalystsCount: 1,
        demandAnalystsNames: "需求分析师",
        demandStageName: "需求任务实施",
        demandPresenterCount: 1,
        demandPresenterNames: "管理员",
        taskRelevancyChartList: [
          {
            taskNo: "xq2024042900050010001",
            taskName: "weiyf-0429-主办",
            taskIsHostName: "主办",
            taskDevRiskCount: 0,
            taskRiskCount: 0,
            taskProgressState: 3,
            taskQualityState: 3,
            taskApplyName: "测试001应用",
            taskTeamName: "研发一体化开发团队",
            taskProductManagerCount: 1,
            taskProductManagerNames: "管理员",
            taskProjectManagerCount: 1,
            taskProjectManagerNames: "管理员",
            taskAnalystsCount: 1,
            taskAnalystsCountNames: "管理员",
            taskDeveloperCount: 0,
            taskDeveloperNames: "",
            taskTestManagerCount: 0,
            taskTestManagerNames: null,
            taskTesterCount: 0,
            taskTesterNames: null,
            versionStateName: "未纳版",
            taskSplitterCount: 1,
            taskSplitterNames: "管理员",
            taskSplitDate: "2024-04-29 17:13:42",
            taskRelevancyChartList: [
              {
                taskNo: "xq2024042900050010002",
                taskName: "weiyf-0429-协办",
                taskIsHostName: "协办",
                taskDevRiskCount: 0,
                taskRiskCount: 0,
                taskProgressState: 3,
                taskQualityState: 3,
                taskApplyName: "测试002应用",
                taskTeamName: "研发一体化测试团队",
                taskProductManagerCount: 1,
                taskProductManagerNames: "管理员",
                taskProjectManagerCount: 1,
                taskProjectManagerNames: "管理员",
                taskAnalystsCount: 1,
                taskAnalystsCountNames: "管理员",
                taskDeveloperCount: 0,
                taskDeveloperNames: "",
                taskTestManagerCount: 0,
                taskTestManagerNames: null,
                taskTesterCount: 0,
                taskTesterNames: null,
                versionStateName: "未纳版",
                taskSplitterCount: 1,
                taskSplitterNames: "管理员",
                taskSplitDate: "2024-04-30 10:01:00",
                taskRelevancyChartList: null
              },
              {
                taskNo: "xq2024042900050010003",
                taskName: "马上水水水水是",
                taskIsHostName: "协办",
                taskDevRiskCount: 0,
                taskRiskCount: 0,
                taskProgressState: 3,
                taskQualityState: 3,
                taskApplyName: "测试002应用",
                taskTeamName: "研发一体化开发团队",
                taskProductManagerCount: 1,
                taskProductManagerNames: "sit测试技术经理",
                taskProjectManagerCount: 1,
                taskProjectManagerNames: "sit测试技术经理",
                taskAnalystsCount: 1,
                taskAnalystsCountNames: "管理员",
                taskDeveloperCount: 0,
                taskDeveloperNames: "",
                taskTestManagerCount: 0,
                taskTestManagerNames: null,
                taskTesterCount: 0,
                taskTesterNames: null,
                versionStateName: "未纳版",
                taskSplitterCount: 1,
                taskSplitterNames: "管理员",
                taskSplitDate: "2024-04-29 17:35:06",
                taskRelevancyChartList: null
              },
              {
                taskNo: "xq2024042900050010004",
                taskName: "马上水水水水是",
                taskIsHostName: "协办",
                taskDevRiskCount: 0,
                taskRiskCount: 0,
                taskProgressState: 3,
                taskQualityState: 3,
                taskApplyName: "测试001应用",
                taskTeamName: "研发一体化二部开发团队",
                taskProductManagerCount: 1,
                taskProductManagerNames: "sit测试技术经理",
                taskProjectManagerCount: 1,
                taskProjectManagerNames: "配置管理员",
                taskAnalystsCount: 1,
                taskAnalystsCountNames: "安全测试员",
                taskDeveloperCount: 0,
                taskDeveloperNames: "",
                taskTestManagerCount: 0,
                taskTestManagerNames: null,
                taskTesterCount: 0,
                taskTesterNames: null,
                versionStateName: "未纳版",
                taskSplitterCount: 1,
                taskSplitterNames: "管理员",
                taskSplitDate: "2024-04-30 10:00:19",
                taskRelevancyChartList: null
              },
              {
                taskNo: "xq2024042900050010005",
                taskName: "马上水水水水是",
                taskIsHostName: "协办",
                taskDevRiskCount: 0,
                taskRiskCount: 0,
                taskProgressState: 3,
                taskQualityState: 3,
                taskApplyName: "测试006应用",
                taskTeamName: "研发一体化测试团队",
                taskProductManagerCount: 1,
                taskProductManagerNames: "测试人员",
                taskProjectManagerCount: 1,
                taskProjectManagerNames: "测试人员",
                taskAnalystsCount: 1,
                taskAnalystsCountNames: "配置管理员",
                taskDeveloperCount: 0,
                taskDeveloperNames: "",
                taskTestManagerCount: 0,
                taskTestManagerNames: null,
                taskTesterCount: 0,
                taskTesterNames: null,
                versionStateName: "未纳版",
                taskSplitterCount: 1,
                taskSplitterNames: "管理员",
                taskSplitDate: "2024-04-29 17:49:42",
                taskRelevancyChartList: null
              }
            ]
          }
        ]
      }
    ]
  }
];
const treedata = (item) => {
  item.data = {
    item: { ...item },
    text: "",
    borderWidth: 1,
    borderColor: "#cccccc",
    color: "#333333",
    fillColor: "#FFFFFF",
    _isshow: true,
    _isintel: true
  };
  if (item.projectNo) {
    item.data.text = "项目";
    if (item.demandRelevancyChartList) {
      item.children = item.demandRelevancyChartList;
      item.children.forEach((el) => {
        treedata(el);
      });
    }
  } else if (item.demandNo) {
    item.data.text = "需求";
    if (item.taskRelevancyChartList) {
      item.children = item.taskRelevancyChartList;
      item.children.forEach((el) => {
        treedata(el);
      });
    }
  } else if (item.taskNo) {
    item.data.text = "任务";
    if (item.taskRelevancyChartList) {
      item.children = item.taskRelevancyChartList;
      item.children.forEach((el) => {
        treedata(el);
      });
    }
  }
};
data.forEach((item) => {
  treedata(item);
});
onMounted(() => {
  console.log(data);
  mindMap = new MindMap({
    el: document.getElementById("mindMapContainer"),
    mousewheelAction: "zoom",
    data: data[0],
    initRootNodePosition: ["left", "center"],
    isUseCustomNodeContent: true,
    customCreateNodeContent: (node) => {
      const _isshow = node.nodeData.data._isshow;
      const _isintel = node.nodeData.data._isintel;
      if (node.nodeData.data.text === "项目") {
        let el = document.createElement("div");
        const app = createApp(project, {
          data: node.nodeData.data,
          modify: async () => {
            node.setData({
              resetRichText: true,
              _isshow: !_isshow
            });
            mindMap.render();
          },
          hide: async () => {
            node.setData({
              resetRichText: true,
              _isintel: !_isintel
            });
            mindMap.render();
          }
        });
        app.mount(el);
        return el;
      } else if (node.nodeData.data.text === "需求") {
        let el = document.createElement("div");
        const app = createApp(demand, {
          data: node.nodeData.data,
          modify: async () => {
            node.setData({
              resetRichText: true,
              _isshow: !_isshow
            });
            mindMap.render();
          },
          hide: async () => {
            node.setData({
              resetRichText: true,
              _isintel: !_isintel
            });
            mindMap.render();
          }
        });
        app.mount(el);
        return el;
      } else if (node.nodeData.data.text === "任务") {
        let el = document.createElement("div");
        const app = createApp(task, {
          data: node.nodeData.data,
          modify: async () => {
            node.setData({
              resetRichText: true,
              _isshow: !_isshow
            });
            mindMap.render();
          },
          hide: async () => {
            node.setData({
              resetRichText: true,
              _isintel: !_isintel
            });
            mindMap.render();
          }
        });
        app.mount(el);
        return el;
      } else {
        return null;
      }
    }
  });
  //连接线配置
  mindMap.setThemeConfig({
    lineColor: "#FCDC00",
    lineWidth: 3,
    lineStyle: "curve",
    second: {
      marginX: 75
    }
  });

  // 监听节点激活事件
  mindMap.on("node_active", (node, nodeList) => {});
  // 监听节点激活事件
  mindMap.on("node_click", (node, e) => {});
});
</script>
<style>
#mindMapContainer {
  width: 100%;
  height: 800px;
}

#mindMapContainer * {
  margin: 0;
  padding: 0;
}
</style>
